<script setup lang="ts">
import { nextTick, onMounted } from "vue";
import { storeToRefs } from "pinia";
import type { Ref } from "vue";
import { HotType } from "@/types/detailTypes/detailTypes.ts";
import type { Good } from "@/types/homeTypes/homeTypes.ts";
import useDetailStore from "@/pinia/modules/detailStore/detailStore.ts";

interface Props {
   type: 1 | 2 | 3;
   goodId?: string;
}

const props = defineProps<Props>();

const detailStore = useDetailStore();

const { hotList }: { hotList: Ref<Good[]> } = storeToRefs(detailStore);

const renderTitle = (): string => {
   return HotType[String(props.type)];
};

onMounted(() => {
   detailStore.fetchHotList(props.goodId, 3, props.type);
});


</script>

<template>
   <div class="hot">
      <h3>{{ renderTitle() }}</h3>
      <good :good="good" v-for="(good) in hotList"></good>
   </div>
</template>

<style scoped lang="less">
.hot {
   h3 {
      height: 70px;
      background: @helpColor;
      color: #fff;
      font-size: 18px;
      line-height: 70px;
      padding-left: 25px;
      margin-bottom: 10px;
      font-weight: normal;
   }

   :deep(.good-item) {
      background: #fff;
      width: 100%;
      margin-bottom: 10px;

      img {
         width: 200px;
         height: 200px;
      }

      p {
         margin: 0 10px;
      }

      &:hover {
         transform: none;
         box-shadow: none;
      }
   }
}
</style>
